<script setup lang="ts" name="Invitations">
// const images = reactive({
//   expand: new URL("@/assets/images/Result/expand.png", import.meta.url).href,
//   arrow: new URL("@/assets/images/Result/arrow.png", import.meta.url).href,
//   reward: new URL("@/assets/images/Result/reward.png", import.meta.url).href,
// });
const data: any = reactive({
  currentIndex: 0,
  tabList: ["我的朋友", "我的奖励"],
});

const {
  currentIndex,
  tabList,

} = toRefs(data);
const handleTabs = (index: number) => {
  currentIndex.value = index;
};
</script>

<template>
    <DetailHeader :title="'我的邀请'" :isNeedBackIcon="true" />
   <div class="InvitationsPage">
        <div class="tabContainer">
        <div class="tabs">
          <div
            @click="handleTabs(index)"
            :class="{ active: index === currentIndex }"
            v-for="(item, index) in tabList"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
        </div>
        <div class="myFriend" v-if="currentIndex===0">
            <div class="accountAndDate">
                <div class="width1">用户</div>
                <div class="width2">日期</div>
            </div>
            <div class="listItem" v-for="(el,index) in new Array(30)" :key="index">
                <div class="width1">853*****49</div>
                <div class="width2">2023年11月27日</div>
            </div>
        </div>
        <div class="myFriend" v-if="currentIndex===1">
            <div class="accountAndDate">
                <div class="myRewardwidth1">数量</div>
                <div class="myRewardwidth2">日期</div>
                <div class="myRewardwidth3">类型</div>
            </div>
            <div class="listItem" v-for="(el,index) in new Array(30)" :key="index">
                <div class="myRewardwidth1">853*****49</div>
                <div class="myRewardwidth2">2023年11月27日</div>
                <div class="myRewardwidth3">2023年11月27日</div>
            </div>
        </div>
   </div>
</template>

<style lang="scss" scoped>
@import url('./index.scss');
</style>
